<template>
  <div>
    <div class="sty1">
      <Header />
    </div>
    <div class="sty2">
      <h1>个人信息</h1>
      <div class="sty3">
        <el-image :src="src" class="image" width="100%" height="100%" @click="uploads"></el-image>
      </div>
      <br />
      <el-divider content-position="left">
        <span class="demonstration" style="float: center"><b>个人签名：</b></span>
      </el-divider>
      <span>这家伙很懒，没有设置个人签名！</span>
      <br />
      <el-divider content-position="right">
        <span class="demonstration" style="float: left"><b>功能选项</b></span>
      </el-divider>
      <div class="sty4">
        <el-button
          type="primary"
          class="sty5"
          :icon="Edit"
          @click="router.push('/updateUser')"
          >修改信息</el-button
        >
      </div>
      <vipVue />
    </div>
    <el-divider direction="vertical"><i class="el-icon-mobile-phone"></i></el-divider>
    <userDetailVue />
    <el-dialog title="查看头像" v-model="dialogVisible" width="30%" :before-close="handleClose">
      <el-divider content-position="left" class="sty6">当前头像</el-divider>
      <div style="height: 200px; width: 200px; margin-left: 70px">
        <el-image :src="src" class="image" width="100%" height="100%" @click="uploads"></el-image>
      </div>
      <div style="width: 300px; height: 100px; margin-top: 20px; margin-left: 20px">
        <el-divider content-position="right">更换头像</el-divider>
        <el-upload
          ref="uploadRef"
          class="upload-demo"
          :limit="1"
          :action="'/api/user/save/' + ruleForm.uid"
          :auto-upload="false"
        >
          <template #trigger>
            <el-button type="primary">选择头像</el-button>
          </template>
          <el-button class="ml-3" type="success" style="margin-left: 10px" @click="submitUpload">
            确认上传
          </el-button>
          <template #tip>
            <div class="el-upload__tip">只能上传一张图片,jpg或png类型且文件小于500kb</div>
          </template>
        </el-upload>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import Header from '@/components/Client/GlobalCom/Header'
import userDetailVue from '@/components/Client/userInfoCom/userDetail.vue'
import vipVue from '@/components/Client/userInfoCom/vip'
import { ref, reactive, onMounted } from 'vue'
import { Edit } from '@element-plus/icons-vue'
import router from '@/router'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import '@/assets/scss/userInfo.scss'
const src = ref('')
const ruleForm = reactive({
  uid: '',
  username: '',
  gender: '',
  password: '',
  addTime: '',
  phone: '',
  email: '',
  headSrc: ''
})
const dialogVisible = ref(false)
onMounted(() => {
  if (document.documentElement.clientWidth < document.documentElement.clientHeight) {
    router.push('userInfoMobile')
  }
  ruleForm.uid = JSON.parse(sessionStorage.getItem('uid'))
  axios.get('/api/user/getUserByUid/' + ruleForm.uid).then((res) => {
    if (res.data !== null) {
      sessionStorage.setItem('headSrc', JSON.stringify(res.data.headsrc))
      ruleForm.headSrc = res.data.headsrc
      src.value = require('../assets/UserPic/' + res.data.headsrc)
    } else {
      ElMessage({
        showClose: true,
        message: '加载失败！',
        type: 'error'
      })
    }
  })
})
const uploadRef = ref()
const uploads = () => {
  dialogVisible.value = true
}
const submitUpload = () => {
  uploadRef.value.submit()
  axios.get('/api/user/getUserByUid/' + ruleForm.uid).then((res) => {
    if (res.data !== null) {
      sessionStorage.setItem('headSrc', JSON.stringify(res.data.headsrc))
      dialogVisible.value = false
      alert('成功上传！')
      router.go(0)
    } else {
      ElMessage({
        showClose: true,
        message: '上传失败！',
        type: 'error'
      })
    }
  })
}
</script>
